<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>日志管理</title>
  <link rel="stylesheet" href="/pear_layui/component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-card">
  <div class="layui-card-body">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <div class="layui-form-item layui-inline">
          <label class="layui-form-label">标题</label>
          <div class="layui-input-inline">
            <input type="text" name="title" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item layui-inline">
          <label class="layui-form-label">访问者</label>
          <div class="layui-input-inline">
            <input type="text" name="userName" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item layui-inline">
          <label class="layui-form-label">类名</label>
          <div class="layui-input-inline">
            <input type="text" name="className" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item layui-inline">
          <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="log-query">
            <i class="layui-icon layui-icon-search"></i>
            查询
          </button>
          <button type="reset" class="pear-btn pear-btn-md">
            <i class="layui-icon layui-icon-refresh"></i>
            重置
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="layui-card">
  <div class="layui-card-body">
    <table id="log-table" lay-filter="log-table"></table>
  </div>
</div>

<script type="text/html" id="log-toolbar">
  <p class="layui-btn layui-btn-danger layui-btn-sm">
    <i class="layui-icon layui-icon-about"></i>默认保存最近3天的记录！</p>
</script>

<script src="/pear_layui/component/layui/layui.js"></script>
<script src="/pear_layui/component/pear/pear.js"></script>
<script>
  layui.use(['table', 'jquery','form'], function () {
    let table = layui.table;
    let $ = layui.jquery;
    let form = layui.form;
    let cols = [
      [
        /*{
          field: 'id',
          hide: true
        },*/
        {
          title: '标题',
          field: 'title',
          align: 'center',
          width: 90
        },
        {
          title: '操作者',
          field: 'userName',
          align: 'center',
          width: 70
        },
        {
          title: '类名',
          field: 'className',
          align: 'center',
          width: 70,
          templet:function (b) {return "<span title='"+b.className+"'>"+b.className+"</span>";}
        },
        {
          title: '方法名',
          field: 'method',
          align: 'center',
          width: 80
        },
        {
          title: '时间',
          field: 'visitTime',
          align: 'center',
          sort: true,
          width: 140
        },
        {
          title: '时长',
          field: 'executionTime',
          align: 'center',
          width: 80,
          templet:function (b) {return b.executionTime + 'ms';}
        },
        {
          title: 'IP',
          field: 'ip',
          align: 'center',
          width: 80
        },
        {
          title: 'URL',
          field: 'url',
          align: 'center',
        },
        {
          title: '系统',
          field: 'osAndBrowser',
          align: 'center',
          width: 100
        },
        {
          title: '请求方式',
          field: 'reqMethod',
          align: 'center',
          width: 90
        },
        {
          title: 'Ajax',
          field: 'isAjax',
          align: 'center',
          width: 70
        },
        {
          title: '参数',
          field: 'param',
          align: 'center',
          width: 80
        },
        {
          title: '返回',
          field: 'result',
          align: 'center',
        },
        {
          title: '异常',
          field: 'exception',
          align: 'center',
          templet:function (b) {
            if(b.description == null || b.description == ''){
              return "<font color='#32cd32'>success</font>";
            }
            return "<font color='red'>"+b.exception+"</font>";
          }
        }
      ]
    ];

    /**
     * 渲染表格数据
     */
    let tableIns = table.render({
      elem: '#log-table',
      url: '/log/findLog',
      page: true,
      limit: 8,
      limits: [8, 16, 32, 64, 128, 256, 512],
      cols: cols,
      skin: 'line',
      toolbar: '#log-toolbar',
      defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
      }, 'filter', 'print', 'exports'],
      done: function (res, curr, count) {
        //判断当前页码是否是大于1并且当前页的数据量为0
        if (curr > 1 && res.data.length == 0) {
          var pageValue = curr - 1;
          //刷新数据表格的数据
          tableIns.reload({
            page: {curr: pageValue}
          });
        }
      }
    });

    /**
     * 表头工具栏
     */
    table.on('toolbar(log-table)', function (obj) {
      if (obj.event === 'refresh') {
        window.refresh();
      }
    });

    /**
     * 根据条件筛选表格数据
     */
    form.on('submit(log-query)', function (data) {
      table.reload('log-table', {
        where: data.field,
        page: {
          curr: 1
        }
      })
      return false;
    });

    window.refresh = function (param) {
      table.reload('log-table');
    };
  })
</script>
</body>
</html>
